<template>
    <div class="footer_box">
        <div class="box_info_tab_content">
            <div class="item_box">
                <div class="nav_item" :class="{'active_nav':$route.meta.login=='directory'}" @click="$router.push({name: 'directory'})">购物指南</div>
                <div class="item_child" @click="changServeTitle(item.id)" v-for="(item,index) in shopGroup" :key="index">{{item.name}}</div>
            </div>
            <div class="item_box">
                <div class="nav_item" :class="{'active_nav':$route.meta.login=='characteristic'}" @click="$router.push({name: 'characteristic'})">特色服务</div>
                <div class="item_child" @click="changTitle(item.id)" v-for="(item,index) in newsGroup" :key="index">{{item.name}}</div>
            </div>
            <div class="box_chang_tans">
                <template v-if="serviceQQ">
                    <div class="nav_tabs">
                        <div style="margin-right: 208px">客服联系QQ</div>
                        <div @click="$router.push({name: 'recruit'})" :class="{'active_nav':$route.meta.login=='recruit'}">人才招聘</div>
                    </div>
                    <div class="car_qq_items" @click="show_tans">
                        <img src="../assets/footer-qq@2x.png">
                        <div>{{serviceQQ}}</div>
                    </div>
                </template>
                <div @click="$router.push({name: 'contact'})" :class="{'active_nav':$route.meta.login=='contactUs'}" class="nav_tabs"
                     style="margin-bottom: 26px">联系我们
                </div>
                <div v-if="tel" class="item_chaisd">电话：{{tel}}</div>
                <div v-if="email" class="item_chaisd">邮箱：{{email}}</div>
                <div v-if="address" class="item_chaisd">地址：{{address}}</div>
            </div>
            <div class="box_time_code">
                <div v-if="publicqrcode" class="car_img_box">
                    <div class="code_img_box">
                        <el-image fit="contain" :src="publicqrcode"></el-image>
                    </div>
                    <div class="code_txt">官方公众号</div>
                </div>
            </div>
        </div>
        <div class="cod_item_txt">
            ©2021-2023 {{siteTitle}}
            <a target="_blank" href="https://beian.miit.gov.cn/">{{copyright}}</a>
        </div>
    </div>
</template>

<script>
    import {getGroupChild} from "@/api/apis";

    export default {
        name: "footerNav",
        data() {
            return {
                newsGroup: [],
                shopGroup: []
            }
        },
        computed: {
            serviceQQ() {
                return this.$store.state.service_qq;
            },
            tel() {
                return this.$store.state.tel;
            },
            email() {
                return this.$store.state.email;
            },
            address() {
                return this.$store.state.address;
            },
            siteTitle() {
                return this.$store.state.siteTitle;
            },
            copyright() {
                return this.$store.state.copyright;
            },
            publicqrcode() {
                return this.$store.state.publicqrcode;
            }
        },
        mounted() {
            this.GetNewsGroup()
            this.GetShureGroup()
        },
        methods: {
            changTitle(e) {
                this.$router.push({name: 'characteristic', query: {child: e}})
            },
            changServeTitle(e) {
                this.$router.push({name: 'directory', query: {child: e}})
            },
            show_tans() {
                window.open(`http://wpa.qq.com/msgrd?v=3&uin=${this.serviceQQ}&site=qq&menu=yes`, '_blank');
            },
            GetNewsGroup() {
                let data = {type: 4}
                getGroupChild(data).then(res => {
                    this.newsGroup = res.data;
                })
            },
            GetShureGroup() {
                let data = {type: 3}
                getGroupChild(data).then(res => {
                    this.shopGroup = res.data;
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .footer_box {
        background: #F1F1F1;
        padding: 62px 0 19px;
        
        .box_info_tab_content {
            width: 1200px;
            margin: 0 auto;
            border-bottom: 1px solid #C8C8C8;
            box-sizing: border-box;
            display: flex;
            cursor: pointer;
            
            .item_box {
                margin-right: 161px;
                width: 126px;
                
                .nav_item {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #000000;
                    margin-bottom: 26px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
                .item_child {
                    margin-bottom: 22px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
                .active_nav {
                    color: #B11E24;
                }
            }
            
            .box_chang_tans {
                margin-right: 74px;
                width: 442px;
            }
            
            .nav_tabs {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #000000;
            }
            
            .active_nav {
                color: #B11E24;
            }
            
            .car_qq_items {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin: 23px 0 29px;
                
                img {
                    width: 14px;
                    height: 16px;
                    margin-right: 6px;
                }
            }
            
            .item_chaisd {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 17px;
            }
            
            .box_time_code {
                .car_img_box {
                    .code_img_box {
                        width: 111px;
                        height: 111px;
                        background: rgba(255, 255, 255, 1);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        
                        img {
                            width: 100px;
                            height: 100px;
                            object-fit: contain;
                        }
                    }
                    
                    .code_txt {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        margin-top: 20px;
                        text-align: center;
                    }
                }
            }
            
        }
        
        .cod_item_txt {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            text-align: center;
            margin-top: 26px;
            
            a {
                color: #000000;
                text-decoration: none;
            }
        }
    }

</style>
